<template>
  <div class="mapEcharts" ref="mapEcharts"></div>
</template>

<script>
import chengde from "./cd.json";
import setmap from "./map.js";
export default {
  data() {
    return {
      myChart: null,
      option: {},
      valArr: [
        {
          itemStyle: { color: "" },
          name: "青羊区",
        },
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.$echarts.registerMap("CD", chengde);
      // 初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs.mapEcharts);
      this.option = {
        // backgroundColor: "rgba(0,0,0,1)",
        backgroundColor: false,
        tooltip: {
          show: false, //弹框是否显示
        },
        grid: {
          top: "0%",
          bottom: 0,
          containLabel: true,
        },
        series: [
          {
            map: "CD",
            type: "map3D",
            boxWidth: 100,
            aspectScale: 0.9, //长宽比
            selectedMode: false, //是否允许选中多个区域
            regionHeight: 3,
            label: {
              show: true,
              color: "#fff",
              backgroundColor: "rgba(0,0,0,0.5)",
              padding: [5, 5],
              borderRadius: 4,
              textStyle: {
                color: "#fff",
                fontSize: 12, // 字体大小
                backgroundColor: false, // 字体背景色
              },
              formatter: (params) => {
                // console.log(703, params);
                // console.log(704, params);
                // if (this.valArr.find((ele) => ele.name == params.name)) {
                //   return (
                //     params.name +
                //       "\n" +
                //       this.valArr.find((ele) => ele.name == params.name)
                //         .value || ""
                //   );
                // } else {
                //   return params.name;
                // }
                return params.name;
              },
            },
            itemStyle: {
              // color: "#3f9a9a",
              opacity: 1,
              color: "#000",
              // shadowColor: "#3F9A9A",
              borderWidth: 2,
              borderColor: "#18fefe",
              shadowColor: "rgb(63,154,154)", // 省份边框阴影
            },
            emphasis: {
              label: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 16,
                  background: false,
                },
              },
              itemStyle: {
                color: "#3F9A9A",
              },
            },
            select: {
              itemStyle: {
                areaColor: "red",
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
            data: this.valArr,
            // data: null,
          },
        ],
      };
      this.myChart.setOption(this.option);
      this.myChart.on("click", (params) => {
        if (params.data) {
          this.valArr[0].name = params.name;
          this.valArr[0].itemStyle.color = "#18fefe";
          this.option.series[0].data = this.valArr;
          this.myChart.setOption(this.option,false);
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.mapEcharts {
  width: 100%;
  height: 100%;
  background: #000;
  box-sizing: border-box;
  padding: 20px;
}
</style>